<head>
    <link href="${ctx}/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx}/font-awesome/3.0.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="${ctx}/css/index.css" rel="stylesheet">
    <link href="${ctx}/bootstrap-table/1.12.0/bootstrap-table.min.css" rel="stylesheet">
    <script src="${ctx}/jquery/2.1.4/jquery.min.js"></script>
    <script src="${ctx}/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="${ctx}/bootstrap-table/1.12.0/bootstrap-table.min.js"></script>
    <script src="${ctx}/bootstrap-table/1.12.0/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="${ctx}/bootstrap-table/1.12.0/extensions/export/bootstrap-table-export.min.js"></script>
    <script src="${ctx}/js/extends.js"></script>
    <script src="${ctx}/layui/layui.all.js"></script>
    <script src="${ctx}/js/util.js"></script>
    <link href="${ctx}/layui/css/layui.css" rel="stylesheet">
    <style>
        .btn {
            font-size: 12px;
        }

        .line_item {
            display: inline-block;
            width: 270px;
            height: 43px;
            margin-right: 10px;
        }

        .line_lab {
            padding: 0;
            line-height: 38px;
            width: 60px;
            margin-right: 10px;
            float: left;
        }

        .line_block {
            width: 200px;
            margin-left: 0;
            float: left;
        }

        .line_block input {
            padding-right: 10px;
        }

        .data_table {
            padding: 0 25px;
        }

        .layui-form-checkbox[lay-skin=primary] i {
            top: 5px;
        }
    </style>
</head>
<body>
<br><br>

<form class="layui-form" action="" lay-filter="item" style="width: 850px;margin: 0 auto;">
    <input type="hidden" name="id" readonly value="${item.id!''}">
    <input type="hidden" name="customId" readonly value="${item.customId!''}">
    <input type="hidden" name="category" readonly value="${item.category!''}">
    <div class="layui-form-item line_item">
        <label class="layui-form-label line_lab"><span class="c-red">*</span>任务id：</label>
        <div class="layui-input-block line_block">
            <input type="text" name="taskId" id="taskId" lay-verify="required" readonly placeholder="请输入任务id"
                   autocomplete="off" class="layui-input" value="${item.taskId!''}">
        </div>
    </div>

    <div class="layui-form-item line_item">
        <label class="layui-form-label line_lab"><span class="c-red">*</span>金额：</label>
        <div class="layui-input-block line_block">
            <input type="number" name="amount" lay-verify="required" placeholder="请输入金额"
                   autocomplete="off" class="layui-input" value="${item.amount!''}">
        </div>
    </div>

    <div class="layui-form-item line_item">
        <label class="layui-form-label line_lab"><span class="c-red">*</span>类别：</label>
        <div class="layui-input-block line_block">
            <input type="radio" name="cat" value=1 title="收款" checked>
            <input type="radio" name="cat" value=2 title="退款">
        </div>
    </div>

    <div class="layui-form-item line_item">
        <label class="layui-form-label line_lab">noteA：</label>
        <div class="layui-input-block line_block">
            <input type="text" name="notea" placeholder="请输入提交备注"
                   autocomplete="off" class="layui-input" value="${item.noteA!''}">
        </div>
    </div>
    <div class="layui-form-item line_item">
        <label class="layui-form-label line_lab">客户名称：</label>
        <div class="layui-input-block line_block">
            <input type="text" name="customName" placeholder="请输入客户名称"
                   autocomplete="off" class="layui-input" value="${item.customName!''}">
        </div>
    </div>

    <div class="layui-form-item line_item">
        <div class="layui-input-block line_block">
            <button class="layui-btn" lay-submit lay-filter="formUpdate">保存</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<div class="data_table">
    <table class="table table-border table-bordered table-hover table-bg table-sort" id="layTable"
           lay-filter="tableFilter"></table>
</div>

<script type="text/html" id="barDemo">

    {{#  if(d.status == 1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="cancel">作废</a>
    {{#  } else { }}

    {{#  } }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<!--请在下方写此页面业务相关的脚本-->
<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="sexDemo" {{
           d.has_deleted== 'False' ? 'checked' : '' }}>
</script>
<script>

    $(document).ready(function () {
        layui.use('form', function () {

            var form = layui.form;
            form.render();
            form.on('submit(formUpdate)', function (data) {
                $.ajax({
                    url: "/financeRecord/edit",    //请求的url地址
                    dataType: "json",   //返回格式为json
                    async: true,//请求是否异步，默认为异步，这也是ajax重要特性
                    data: data.field,    //参数值,键值对
                    type: "post",   //请求方式
                    beforeSend: function () {
                        //请求前的处理
                    },
                    success: function (req) {
                        //请求成功时处理
                        if (req.success) {
                            parent.showmsg(req.message);
                            layer.msg(req.message)
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭

                        } else {
                            layer.msg(req.message)
                        }
                    },
                    complete: function () {
                        //请求完成的处理
                    },
                    error: function () {
                        //请求出错处理
                        layer.msg("请重试！若在失败请联系管理员")
                    }
                });

                return false;
            });
        });
    });


    var status = '';
    var checkStatus = '';
    var cat = '';
    var startDate = "";
    var endDate = "";
    var searchKey = "";
    var tableIns;
    var ids = "";

    var table = "tb_finance_record";
    layui.use('form', function () {
        var form = layui.form;
        form.render();
        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
    layui.use('table', function () {
        tableIns = layui.table;
        tableIns.render({
            elem: '#layTable'
            ,
            totalRow: true

            ,

            url: '/financeRecord/data'
            ,
            method: 'POST'
            ,
            where: {
                table: table,
                taskId: $('#taskId').val(),
                query: {'status': status, 'checkStatus': checkStatus, 'cat': cat, 'taskId': $('#taskId').val()},
                time: {'start': startDate, 'end': endDate},
                key: {'name': searchKey}
            }
            ,
            id: 'dataTableId'
            ,
            cols: [[
                {
                    type: 'checkbox', field: 'id', totalRowText: "合计:"
                }
                , {
                    field: 'createTime', title: '创建时间', templet: function (data) {
                        return dateFormat(data.createTime);
                    }, align: 'center', width: 160, sort: true
                }
                , {field: 'createBy', title: '创建人', width: 120, align: 'center', sort: true}
                , {field: 'amount', title: '金额', width: 120, align: 'center', sort: true, totalRow: true}
                , {
                    field: 'cat', title: '类别', width: 100, align: 'center', sort: true,
                    templet: function (data) {
                        if (data.cat == 1) {
                            return "<div style='color: blue'>收款<div> ";
                        } else {
                            return "<div style='color: red'>退款<div> ";
                        }

                    }
                }
                , {
                    field: 'checkStatus',
                    title: '财务是否确认',
                    width: 120,
                    align: 'center',
                    sort: true,
                    templet: function (data) {
                        if (data.checkStatus == 1) {
                            return "<div style='color: red'>待确认<div> ";
                        } else {
                            return "<div style='color: blue'>已确认<div> ";
                        }
                    }
                }
                , {
                    field: 'checkerUserid',
                    title: '财务审核操作人员ID',
                    width: 160,
                    align: 'center',
                    sort: true
                }


                , {
                    field: 'status',
                    title: '状态',
                    width: 160,
                    align: 'center',
                    sort: true,
                    templet: function (data) {
                        if (data.status == 1) {
                            return "<div style='color: blue'>正常<div> ";
                        } else {
                            return "<div style='color: red'>已作废<div> ";
                        }
                    }
                }
            ]]
            ,
            page: true
        });

        form.on('switch(sexDemo)', function (obj) {
            // layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
            if (obj.elem.checked) {
                commonenable(this.value, 'False');
            } else {
                commonenable(this.value, 'true');
            }

        });
        tableIns.on('checkbox(tableFilter)', function (obj) {
            var checkStatus = tableIns.checkStatus('dataTableId');
            var dataList = checkStatus.data;
            if (dataList != null && dataList.length > 0) {

                for (var i = 0; i < dataList.length; i++) {
                    ids += dataList[i].id + ",";
                }
            }
        });

        function deleteId(ids) {
            if (ids != "") {
                $.ajax({
                    url: "/delete/data",
                    type: 'post',
                    data: {"table": table, "ids": ids},
                    async: false,
                    dataType: "json",
                    success: function (arg) {
                        if (arg) {
                            layer.msg(arg.message);
                            search();
                        } else {
                            layer.msg(arg.message);
                        }
                    }
                });
            }
        }

        $("#multiDelete").click(function () {
            deleteId(ids)
        });

        tableIns.on('tool(tableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
            } else if (obj.event === 'del') {
                if (data.hasDeleted == 1) {
                    layer.msg('已删除，不可进行该操作!', {icon: 1, time: 1000});
                    return;
                }
                layer.confirm('真的删除行么', function (index) {
                    deleteId(data.id)
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                if (data.hasDeleted == 1) {
                    layer.msg('已删除，不可进行该操作!', {icon: 1, time: 1000});
                    return;
                }
                layer_show("修改", "/financeRecord/edit?id=" + data.id, "550", "650");
                parent.search();
            } else if (obj.event === 'cancel') {
                layer.confirm('确认作废么?', function (index) {
                    cancellList(data.id);
                    layer.close(index);
                });
            }
        });
    });
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>